<template>
  <div class="layout-aside-container">
    <ul class="menu">
      <li class="menu-item">
        <router-link to="/home/users">用户管理</router-link>
      </li>
      <li class="menu-item">
        <router-link to="/home/rights">权限管理</router-link>
      </li>
      <li class="menu-item">
        <router-link to="/home/goods">商品管理</router-link>
      </li>
      <li class="menu-item">
        <router-link to="/home/orders">订单管理</router-link>
      </li>
      <li class="menu-item">
        <router-link to="/home/settings">系统设置</router-link>
      </li>
    </ul>
  </div>
</template>

<script setup>
// 无额外逻辑，仅渲染导航
</script>

<style scoped lang="less">
.layout-aside-container {
  width: 200px;
  height: 100%;
  background: #2c3e50;

  .menu {
    margin: 0;
    padding: 0;
    list-style: none;

    .menu-item {
      border-bottom: 1px solid #34495e;

      router-link {
        display: block;
        padding: 15px 20px;
        color: #ecf0f1;
        text-decoration: none;
        transition: background 0.3s;

        &.router-link-active {
          background: #3498db;
        }

        &:hover {
          background: #34495e;
        }
      }
    }
  }
}
</style>